import Image from 'next/image'
import Link from 'next/link'
import { News } from '@/types/news'

interface Props {
  news: News
}

const categoryLabels = {
  industry: '行业新闻',
  company: '公司新闻',
  product: '产品资讯'
}

export default function NewsCard({ news }: Props) {
  return (
    <article className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <Link href={`/news/${news.id}`} className="block">
        <div className="relative h-48">
          <Image
            src={news.coverImage.url}
            alt={news.coverImage.alt}
            fill
            className="object-cover"
          />
          <span className="absolute top-4 left-4 bg-primary text-white px-3 py-1 rounded-full text-sm">
            {categoryLabels[news.category]}
          </span>
        </div>
        <div className="p-6">
          <h3 className="text-xl font-bold text-gray-900 mb-2 line-clamp-2">
            {news.title}
          </h3>
          <p className="text-gray-600 mb-4 line-clamp-2">
            {news.description}
          </p>
          <div className="flex items-center justify-between text-sm text-gray-500">
            <span>{news.author}</span>
            <time dateTime={news.publishDate}>
              {new Date(news.publishDate).toLocaleDateString('zh-CN')}
            </time>
          </div>
        </div>
      </Link>
    </article>
  )
}
